<template>
  <div class="box">
    <div class="box-header">
      <h3 class="box-title">{{title}}</h3>

      <div class="box-tools pull-right">
        <button type="button" class="btn btn-box-tool" @click="collapse" title="Collapse">
          <i class="fa fa-minus"></i></button>
        <button type="button" class="btn btn-box-tool" @click="remove" title="Remove">
          <i class="fa fa-times"></i></button>
      </div>
    </div>
    <!-- /.box-header -->
    <div class="box-body" v-show="!isCollapse">
      <slot name="box-body">
        Box Body
      </slot>
    </div>
    <div class="box-footer" v-show="!isCollapse">
      <slot name="box-footer">
        Box Footer
      </slot>
    </div>
</template>

<script>
export default {
  props:{
    isCollapse:{
      type: Boolean,
      default: false
    },
    title:{
      type:String,
      default: "Title"
    }
  },
  methods:{
    collapse:function(){
      this.isCollapse=!this.isCollapse
    },
    remove:function(){
      this.$remove()
    }
  }
}
</script>
<style>
  hide:{
    display: none;
  }
</style>
